<template>
  <view class="container">
    <!-- 返回按钮 -->
    <view class="back-btn" @tap="goBack">
      <u-icon name="arrow-left" color="#fff" size="20" />
    </view>

    <!-- 菜品图片 -->
    <view class="dish-image-container">
      <image class="dish-image" :src="dish.image" mode="aspectFill" />
      <view v-if="dish.tags && dish.tags.length" class="tags">
        <view v-for="tag in dish.tags" :key="tag" class="tag">
          {{ tag }}
        </view>
      </view>
    </view>

    <!-- 菜品信息 -->
    <view class="dish-info">
      <view class="basic-info">
        <text class="dish-name">{{ dish.name }}</text>
        <text class="dish-desc">{{ dish.description }}</text>
      </view>

      <view class="points-section">
        <view class="points">
          <text class="points-value">{{ dish.points }}</text>
          <u-icon name="heart-fill" color="#ff6b81" size="20" />
        </view>
        <text class="points-text">爱心积分</text>
      </view>
    </view>

    <!-- 规格选择 -->
    <view v-if="dish.specs && dish.specs.length" class="spec-section">
      <text class="section-title">规格选择</text>
      <view class="spec-options">
        <view
          v-for="spec in dish.specs"
          :key="spec.id"
          class="spec-option"
          :class="{ active: selectedSpec === spec.id }"
          @tap="selectSpec(spec.id)"
        >
          {{ spec.name }} (+{{ spec.points }}积分)
        </view>
      </view>
    </view>

    <!-- 特殊要求 -->
    <view class="special-requests">
      <text class="section-title">特殊要求</text>
      <u-textarea
        v-model="specialRequests"
        placeholder="请输入特殊要求，如不要香菜、少辣等"
        :maxlength="200"
        :auto-height="false"
        height="120"
      />
    </view>

    <!-- 数量选择 -->
    <view class="quantity-section">
      <text class="section-title">数量</text>
      <view class="quantity-selector">
        <view class="quantity-btn" @tap="decreaseQuantity">
          <u-icon name="minus" color="#666" size="20" />
        </view>
        <text class="quantity-value">{{ quantity }}</text>
        <view class="quantity-btn" @tap="increaseQuantity">
          <u-icon name="plus" color="#666" size="20" />
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="total-info">
        <text class="total-label">总计：</text>
        <text class="total-points">{{ totalPoints }}</text>
        <u-icon name="heart-fill" color="#ff6b81" size="16" />
      </view>
      <custom-button
        type="primary"
        size="large"
        :text="`加入购物车`"
        @click="addToCart"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDishStore } from '@/store/modules/dish'
import { useCartStore } from '@/store/modules/cart'

const dishStore = useDishStore()
const cartStore = useCartStore()

// 页面参数
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
})

// 数据
const dish = ref({})
const selectedSpec = ref('')
const specialRequests = ref('')
const quantity = ref(1)

// 计算属性
const totalPoints = computed(() => {
  let basePoints = dish.value.points || 0
  
  // 加上规格积分
  if (selectedSpec.value && dish.value.specs) {
    const spec = dish.value.specs.find(s => s.id === selectedSpec.value)
    if (spec) {
      basePoints += spec.points
    }
  }
  
  return basePoints * quantity.value
})

// 方法
const goBack = () => {
  uni.navigateBack()
}

const selectSpec = (specId) => {
  selectedSpec.value = specId
}

const increaseQuantity = () => {
  quantity.value++
}

const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

const addToCart = () => {
  const cartItem = {
    id: dish.value.id,
    name: dish.value.name,
    image: dish.value.image,
    points: totalPoints.value,
    quantity: quantity.value,
    specialRequests: specialRequests.value,
    spec: selectedSpec.value ? dish.value.specs.find(s => s.id === selectedSpec.value) : null
  }
  
  cartStore.addToCart(cartItem)
  
  uni.showToast({
    title: '已添加到购物车',
    icon: 'success'
  })
  
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}

const loadDishDetail = async () => {
  try {
    await dishStore.getDishes()
    dish.value = dishStore.dishes.find(d => d.id === parseInt(props.id)) || {}
    
    if (!dish.value.id) {
      uni.showToast({
        title: '菜品不存在',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  } catch (error) {
    console.error('加载菜品详情失败:', error)
    uni.showToast({
      title: '加载失败',
      icon: 'none'
    })
  }
}

onMounted(() => {
  loadDishDetail()
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 1334rpx;
  background: #f5f5f5;
  padding-bottom: 120rpx;
}

.back-btn {
  position: fixed;
  top: 60rpx;
  left: 30rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.dish-image-container {
  position: relative;
  
  .dish-image {
    width: 100%;
    height: 400rpx;
}
  
  .tags {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
    .tag {
      background: rgba(255, 107, 129, 0.8);
      color: #fff;
      font-size: 20rpx;
      padding: 6rpx 12rpx;
      border-radius: 12rpx;
      margin-bottom: 8rpx;
}
  }
}

.dish-info {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .basic-info {
    margin-bottom: 20rpx;
    
    .dish-name {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10rpx;
}
    
    .dish-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
}
  }
  
  .points-section {
    display: flex;
    align-items: center;
    
    .points {
      display: flex;
      align-items: center;
      margin-right: 10rpx;
      
      .points-value {
        font-size: 32rpx;
        font-weight: bold;
        color: #ff6b81;
        margin-right: 4rpx;
}
    }
    
    .points-text {
      font-size: 28rpx;
      color: #666;
}
  }
}

.spec-section,
.special-requests,
.quantity-section {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 20rpx;
}
}

.spec-options {
  display: flex;
  flex-wrap: wrap;
   margin-right: 20rpx; &:last-child { margin-right: 0; }
  
  .spec-option {
    padding: 15rpx 30rpx;
    background: #f5f5f5;
    border-radius: 25rpx;
    font-size: 26rpx;
    color: #666;
    border: 1rpx solid #e0e0e0;
    
    &.active {
      background: #ff6b81;
      color: #fff;
      border-color: #ff6b81;
}
  }
}

.quantity-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  
  .quantity-btn {
    width: 60rpx;
    height: 60rpx;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
  .quantity-value {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin: 0 40rpx;
    min-width: 60rpx;
    text-align: center;
}
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .total-info {
    display: flex;
    align-items: center;
    
    .total-label {
      font-size: 28rpx;
      color: #666;
}
    
    .total-points {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff6b81;
      margin-right: 4rpx;
}
  }
}
</style>